<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拼音魔法王国 - 幼儿园汉语拼音启蒙</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Comic Sans MS', 'Marker Felt', 'Arial Rounded MT Bold', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #FFF0F5 0%, #E6FFE6 50%, #FFF9E6 100%);
            min-height: 100vh;
            overflow-x: hidden;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            animation: bounce 2s infinite;
        }

        .title {
            font-size: 3rem;
            color: #FF6347;
            text-shadow: 3px 3px 0px #FFB6C1;
            margin-bottom: 10px;
        }

        .subtitle {
            font-size: 1.5rem;
            color: #32CD32;
            margin-bottom: 20px;
        }

        .game-area {
            background: white;
            border-radius: 30px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .game-modes {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .game-card {
            background: linear-gradient(135deg, #FFB6C1 0%, #98FB98 100%);
            border-radius: 25px;
            padding: 30px;
            text-align: center;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .game-card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 15px 40px rgba(0,0,0,0.2);
        }

        .pinyin-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 15px;
            margin: 20px 0;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }

        .pinyin-card {
            aspect-ratio: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #FFE4B5 0%, #FFDEAD 100%);
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .pinyin-card:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
        }

        .pinyin {
            font-size: 2.5rem;
            font-weight: bold;
            color: #8B4513;
            margin-bottom: 5px;
        }

        .chinese {
            font-size: 1.5rem;
            color: #CD853F;
            font-weight: bold;
        }

        .tone {
            font-size: 1.2rem;
            color: #FF6347;
        }

        .syllable-display {
            background: linear-gradient(135deg, #FFE4E1 0%, #FFF0F5 100%);
            border-radius: 25px;
            padding: 40px;
            text-align: center;
            margin: 20px 0;
        }

        .big-pinyin {
            font-size: 4rem;
            font-weight: bold;
            color: #FF6347;
            margin-bottom: 10px;
        }

        .big-chinese {
            font-size: 3rem;
            color: #32CD32;
            margin: 10px 0;
        }

        .tone-indicator {
            font-size: 2rem;
            color: #FF69B4;
        }

        .controls {
            text-align: center;
            margin: 20px 0;
        }

        .btn {
            font-size: 1.3rem;
            padding: 15px 30px;
            margin: 10px;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: inherit;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .btn-primary {
            background: linear-gradient(135deg, #FF69B4 0%, #FF1493 100%);
            color: white;
        }

        .btn-success {
            background: linear-gradient(135deg, #32CD32 0%, #228B22 100%);
            color: white;
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
        }

        .score-board {
            background: linear-gradient(135deg, #FFB6C1 0%, #FF69B4 100%);
            border-radius: 25px;
            padding: 20px;
            text-align: center;
            margin-bottom: 20px;
            color: white;
            font-size: 1.5rem;
            font-weight: bold;
        }

        .progress-bar {
            width: 100%;
            height: 20px;
            background: rgba(255,255,255,0.3);
            border-radius: 10px;
            overflow: hidden;
            margin-top: 10px;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #FF69B4, #FF1493);
            transition: width 0.5s ease;
            border-radius: 10px;
        }

        .instructions {
            background: #FFF0F5;
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 20px;
            border-left: 5px solid #FF69B4;
        }

        .instructions h4 {
            color: #FF6347;
            font-size: 1.5rem;
            margin-bottom: 10px;
        }

        .instructions p {
            color: #32CD32;
            font-size: 1.2rem;
            line-height: 1.6;
        }

        .tone-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
            margin: 20px 0;
        }

        .tone-card {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #E6E6FA 0%, #DDA0DD 100%);
            border-radius: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 2rem;
            font-weight: bold;
            color: #8B008B;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }

        .tone-card:hover {
            transform: scale(1.1);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .matching-pinyin {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin: 20px 0;
        }

        .pinyin-pool, .character-pool {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }

        .character-card {
            aspect-ratio: 1;
            background: white;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }

        .character-card:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .character-card.matched {
            background: #4CAF50;
            transform: scale(0.9);
        }

        .celebration {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1000;
        }

        .star {
            position: absolute;
            font-size: 2rem;
            animation: fall 3s linear forwards;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }

        @keyframes fall {
            to {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }

        @media (max-width: 768px) {
            .title {
                font-size: 2rem;
            }
            
            .matching-pinyin {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1 class="title">🌸 拼音魔法王国 🌸</h1>
            <p class="subtitle">和可爱的小动物一起学习汉语拼音！</p>
        </div>

        <div class="score-board">
            <div>🌟 魔法星星: <span id="score">0</span> 颗</div>
            <div class="progress-bar">
                <div class="progress-fill" id="progress" style="width: 0%"></div>
            </div>
        </div>

        <div class="game-area">
            <div id="game-selection">
                <h2 style="text-align: center; color: #FF6347; margin-bottom: 20px;">选择你喜欢的拼音游戏吧！</h2>
                <div class="game-modes">
                    <div class="game-card" onclick="startGame('initials')">
                        <h3>🔤 声母学习</h3>
                        <p>学习23个声母的发音</p>
                    </div>
                    <div class="game-card" onclick="startGame('finals')">
                        <h3>🎵 韵母学习</h3>
                        <p>学习24个韵母的发音</p>
                    </div>
                    <div class="game-card" onclick="startGame('tones')">
                        <h3>🎯 声调游戏</h3>
                        <p>学习四个声调的变化</p>
                    </div>
                    <div class="game-card" onclick="startGame('matching')">
                        <h3>🧩 拼音配对</h3>
                        <p>把拼音和汉字连起来</p>
                    </div>
                </div>
            </div>

            <div id="game-instructions" style="display: none;">
                <div class="instructions">
                    <h4 id="instruction-title">游戏说明</h4>
                    <p id="instruction-text">点击开始游戏吧！</p>
                </div>
            </div>

            <div id="syllable-display" style="display: none;">
                <div class="syllable-display">
                    <div class="big-pinyin" id="current-pinyin">ā</div>
                    <div class="big-chinese" id="current-chinese">啊</div>
                    <div class="tone-indicator" id="tone-indicator">第一声</div>
                </div>
            </div>

            <div id="pinyin-grid" class="pinyin-grid" style="display: none;"></div>
            
            <div id="tone-grid" class="tone-grid" style="display: none;"></div>
            
            <div id="matching-pinyin" class="matching-pinyin" style="display: none;">
                <div>
                    <h3 style="text-align: center; color: #FF6347;">拼音</h3>
                    <div class="pinyin-pool" id="pinyin-pool"></div>
                </div>
                <div>
                    <h3 style="text-align: center; color: #FF6347;">汉字</h3>
                    <div class="character-pool" id="character-pool"></div>
                </div>
            </div>

            <div class="controls">
                <button class="btn btn-primary" onclick="startGame(currentGame)" id="start-btn">开始游戏</button>
                <button class="btn btn-success" onclick="backToMenu()" style="display: none;" id="back-btn">返回菜单</button>
                <button class="btn" onclick="nextSyllable()" style="display: none;" id="next-btn">下一个</button>
            </div>
        </div>
    </div>

    <div class="celebration" id="celebration"></div>

    <script>
        let currentGame = null;
        let score = 0;
        let currentIndex = 0;
        let selectedCard = null;
        let matchedPairs = 0;

        // 拼音数据
        const pinyinData = {
            initials: [
                { pinyin: 'b', chinese: '波', example: '爸爸' },
                { pinyin: 'p', chinese: '坡', example: '妈妈' },
                { pinyin: 'm', chinese: '摸', example: '妹妹' },
                { pinyin: 'f', chinese: '佛', example: '头发' },
                { pinyin: 'd', chinese: '得', example: '大地' },
                { pinyin: 't', chinese: '特', example: '太阳' },
                { pinyin: 'n', chinese: '讷', example: '牛奶' },
                { pinyin: 'l', chinese: '勒', example: '老师' },
                { pinyin: 'g', chinese: '哥', example: '哥哥' },
                { pinyin: 'k', chinese: '科', example: '开心' },
                { pinyin: 'h', chinese: '喝', example: '花朵' },
                { pinyin: 'j', chinese: '鸡', example: '姐姐' },
                { pinyin: 'q', chinese: '七', example: '气球' },
                { pinyin: 'x', chinese: '西', example: '西瓜' },
                { pinyin: 'z', chinese: '资', example: '桌子' },
                { pinyin: 'c', chinese: '雌', example: '草莓' },
                { pinyin: 's', chinese: '思', example: '森林' },
                { pinyin: 'r', chinese: '日', example: '日出' },
                { pinyin: 'zh', chinese: '知', example: '中国' },
                { pinyin: 'ch', chinese: '吃', example: '吃饭' },
                { pinyin: 'sh', chinese: '诗', example: '书包' },
                { pinyin: 'y', chinese: '医', example: '医生' },
                { pinyin: 'w', chinese: '乌', example: '乌龟' }
            ],
            finals: [
                { pinyin: 'a', chinese: '啊', tone: '第一声' },
                { pinyin: 'o', chinese: '哦', tone: '第一声' },
                { pinyin: 'e', chinese: '鹅', tone: '第一声' },
                { pinyin: 'i', chinese: '衣', tone: '第一声' },
                { pinyin: 'u', chinese: '乌', tone: '第一声' },
                { pinyin: 'ü', chinese: '鱼', tone: '第一声' },
                { pinyin: 'ai', chinese: '爱', tone: '第四声' },
                { pinyin: 'ei', chinese: '诶', tone: '第一声' },
                { pinyin: 'ui', chinese: '威', tone: '第一声' },
                { pinyin: 'ao', chinese: '奥', tone: '第四声' },
                { pinyin: 'ou', chinese: '欧', tone: '第一声' },
                { pinyin: 'iu', chinese: '优', tone: '第一声' },
                { pinyin: 'ie', chinese: '耶', tone: '第一声' },
                { pinyin: 'üe', chinese: '约', tone: '第一声' },
                { pinyin: 'an', chinese: '安', tone: '第一声' },
                { pinyin: 'en', chinese: '恩', tone: '第一声' },
                { pinyin: 'in', chinese: '因', tone: '第一声' },
                { pinyin: 'un', chinese: '温', tone: '第一声' },
                { pinyin: 'ün', chinese: '晕', tone: '第一声' },
                { pinyin: 'ang', chinese: '昂', tone: '第一声' },
                { pinyin: 'eng', chinese: '鞥', tone: '第一声' },
                { pinyin: 'ing', chinese: '英', tone: '第一声' },
                { pinyin: 'ong', chinese: '轰', tone: '第一声' }
            ],
            tones: [
                { mark: '¯', tone: '第一声', example: 'mā', desc: '高平调' },
                { mark: 'ˊ', tone: '第二声', example: 'má', desc: '升调' },
                { mark: 'ˇ', tone: '第三声', example: 'mǎ', desc: '降升调' },
                { mark: 'ˋ', tone: '第四声', example: 'mà', desc: '降调' }
            ],
            matching: [
                { pinyin: 'mā', chinese: '妈', meaning: '妈妈' },
                { pinyin: 'bà', chinese: '爸', meaning: '爸爸' },
                { pinyin: 'gē', chinese: '哥', meaning: '哥哥' },
                { pinyin: 'jiě', chinese: '姐', meaning: '姐姐' },
                { pinyin: 'dì', chinese: '弟', meaning: '弟弟' },
                { pinyin: 'mèi', chinese: '妹', meaning: '妹妹' },
                { pinyin: 'xué', chinese: '学', meaning: '学习' },
                { pinyin: 'xǐ', chinese: '喜', meaning: '喜欢' }
            ]
        };

        // 音效系统
        const sounds = {
            correct: new Audio('data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSuBzvLZiTYIG2m98OScTgwOUarm7blmFgU7k9n1unEiBC13yO/eizEIHWq+8+OWT'),
            wrong: new Audio('data:audio/wav;base64,UklGRuICAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YcACAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSuBzvLZiTYIG2m98OScTgwOUarm7blmFgU7k9n1unEiBC13yO/eizEIHWq+8+OWT')
        };

        function playSound(type) {
            try {
                sounds[type].currentTime = 0;
                sounds[type].play().catch(() => {});
            } catch (e) {}
        }

        function updateScore(points) {
            score += points;
            document.getElementById('score').textContent = score;
            const progress = Math.min((score / 100) * 100, 100);
            document.getElementById('progress').style.width = progress + '%';
        }

        function createCelebration() {
            const celebration = document.getElementById('celebration');
            const emojis = ['🌸', '🌺', '🌻', '🌷', '🌹', '🎉', '🎊', '🏆'];
            
            for (let i = 0; i < 20; i++) {
                setTimeout(() => {
                    const star = document.createElement('div');
                    star.className = 'star';
                    star.textContent = emojis[Math.floor(Math.random() * emojis.length)];
                    star.style.left = Math.random() * 100 + '%';
                    star.style.animationDelay = Math.random() * 2 + 's';
                    celebration.appendChild(star);
                    
                    setTimeout(() => star.remove(), 3000);
                }, i * 100);
            }
        }

        function startGame(gameType) {
            currentGame = gameType;
            document.getElementById('game-selection').style.display = 'none';
            document.getElementById('game-instructions').style.display = 'block';
            document.getElementById('back-btn').style.display = 'inline-block';
            
            switch(gameType) {
                case 'initials':
                    document.getElementById('instruction-title').textContent = '🔤 声母学习';
                    document.getElementById('instruction-text').textContent = '学习23个声母的发音！点击每个声母卡片学习发音！';
                    document.getElementById('pinyin-grid').style.display = 'grid';
                    initInitialsGame();
                    break;
                case 'finals':
                    document.getElementById('instruction-title').textContent = '🎵 韵母学习';
                    document.getElementById('instruction-text').textContent = '学习24个韵母的发音！';
                    document.getElementById('pinyin-grid').style.display = 'grid';
                    initFinalsGame();
                    break;
                case 'tones':
                    document.getElementById('instruction-title').textContent = '🎯 声调游戏';
                    document.getElementById('instruction-text').textContent = '学习四个声调的变化！';
                    document.getElementById('tone-grid').style.display = 'grid';
                    initTonesGame();
                    break;
                case 'matching':
                    document.getElementById('instruction-title').textContent = '🧩 拼音配对';
                    document.getElementById('instruction-text').textContent = '把拼音和对应的汉字连起来！';
                    document.getElementById('matching-pinyin').style.display = 'grid';
                    initMatchingGame();
                    break;
            }
        }

        function initInitialsGame() {
            const grid = document.getElementById('pinyin-grid');
            grid.innerHTML = '';
            
            pinyinData.initials.forEach((item, index) => {
                const card = document.createElement('div');
                card.className = 'pinyin-card';
                card.style.background = `hsl(${index * 15}, 70%, 80%)`;
                card.innerHTML = `
                    <div class="pinyin">${item.pinyin}</div>
                    <div class="chinese">${item.chinese}</div>
                `;
                card.onclick = () => handlePinyinClick(item, card);
                grid.appendChild(card);
            });
        }

        function initFinalsGame() {
            const grid = document.getElementById('pinyin-grid');
            grid.innerHTML = '';
            
            pinyinData.finals.forEach((item, index) => {
                const card = document.createElement('div');
                card.className = 'pinyin-card';
                card.style.background = `hsl(${index * 12 + 180}, 70%, 80%)`;
                card.innerHTML = `
                    <div class="pinyin">${item.pinyin}</div>
                    <div class="chinese">${item.chinese}</div>
                    <div class="tone">${item.tone}</div>
                `;
                card.onclick = () => handlePinyinClick(item, card);
                grid.appendChild(card);
            });
        }

        function initTonesGame() {
            const grid = document.getElementById('tone-grid');
            grid.innerHTML = '';
            
            pinyinData.tones.forEach((item, index) => {
                const card = document.createElement('div');
                card.className = 'tone-card';
                card.style.background = `hsl(${index * 90}, 70%, 80%)`;
                card.innerHTML = `${item.mark}<br>${item.tone}`;
                card.onclick = () => handleToneClick(item, card);
                grid.appendChild(card);
            });
        }

        function initMatchingGame() {
            const pinyinPool = document.getElementById('pinyin-pool');
            const characterPool = document.getElementById('character-pool');
            
            pinyinPool.innerHTML = '';
            characterPool.innerHTML = '';
            
            const selected = pinyinData.matching.sort(() => Math.random() - 0.5).slice(0, 6);
            
            selected.forEach(item => {
                // 拼音卡片
                const pinyinCard = document.createElement('div');
                pinyinCard.className = 'character-card';
                pinyinCard.style.background = '#FFE4B5';
                pinyinCard.textContent = item.pinyin;
                pinyinCard.dataset.pinyin = item.pinyin;
                pinyinCard.onclick = () => handleMatchingClick(pinyinCard, 'pinyin');
                pinyinPool.appendChild(pinyinCard);
                
                // 汉字卡片
                const charCard = document.createElement('div');
                charCard.className = 'character-card';
                charCard.style.background = '#E6FFE6';
                charCard.textContent = item.chinese;
                charCard.dataset.pinyin = item.pinyin;
                charCard.onclick = () => handleMatchingClick(charCard, 'character');
                characterPool.appendChild(charCard);
            });
        }

        function handlePinyinClick(item, card) {
            card.classList.add('correct');
            playSound('correct');
            updateScore(1);
            
            setTimeout(() => {
                card.classList.remove('correct');
            }, 1000);
        }

        function handleToneClick(item, card) {
            card.classList.add('correct');
            playSound('correct');
            updateScore(2);
            
            setTimeout(() => {
                card.classList.remove('correct');
            }, 1000);
        }

        function handleMatchingClick(card, type) {
            if (card.classList.contains('matched')) return;
            
            if (!selectedCard) {
                selectedCard = card;
                card.style.background = '#FFD700';
            } else {
                if (selectedCard.dataset.pinyin === card.dataset.pinyin && selectedCard !== card) {
                    selectedCard.classList.add('matched');
                    card.classList.add('matched');
                    selectedCard.style.background = '#4CAF50';
                    card.style.background = '#4CAF50';
                    playSound('correct');
                    updateScore(5);
                    matchedPairs++;
                    
                    if (matchedPairs === 6) {
                        setTimeout(() => {
                            alert('🎉 太棒了！你完成了所有配对！');
                            createCelebration();
                            initMatchingGame();
                        }, 500);
                    }
                } else {
                    selectedCard.style.background = '#FF5252';
                    card.style.background = '#FF5252';
                    playSound('wrong');
                    
                    setTimeout(() => {
                        selectedCard.style.background = type === 'pinyin' ? '#FFE4B5' : '#E6FFE6';
                        card.style.background = type === 'pinyin' ? '#FFE4B5' : '#E6FFE6';
                    }, 500);
                }
                selectedCard = null;
            }
        }

        function nextSyllable() {
            // 用于声调学习
            currentIndex = (currentIndex + 1) % pinyinData.tones.length;
            displayCurrentTone();
            updateScore(2);
        }

        function displayCurrentTone() {
            const current = pinyinData.tones[currentIndex];
            document.getElementById('current-pinyin').textContent = current.example;
            document.getElementById('current-chinese').textContent = current.desc;
            document.getElementById('tone-indicator').textContent = current.tone;
        }

        function backToMenu() {
            document.getElementById('game-selection').style.display = 'block';
            document.getElementById('game-instructions').style.display = 'none';
            document.getElementById('pinyin-grid').style.display = 'none';
            document.getElementById('tone-grid').style.display = 'none';
            document.getElementById('matching-pinyin').style.display = 'none';
            document.getElementById('back-btn').style.display = 'none';
            currentGame = null;
            matchedPairs = 0;
            selectedCard = null;
        }

        // 添加可爱的动物朋友
        function addAnimalFriends() {
            const animals = ['🐼', '🐨', '🦊', '🐰', '🐻', '🦁', '🐸', '🐵', '🐯', '🐨'];
            const container = document.querySelector('.container');
            
            animals.forEach((animal, index) => {
                const friend = document.createElement('div');
                friend.style.position = 'absolute';
                friend.style.fontSize = '3rem';
                friend.textContent = animal;
                friend.style.left = (5 + index * 9) + '%';
                friend.style.top = (5 + Math.random() * 15) + '%';
                friend.style.animation = `bounce ${2 + index * 0.5}s infinite`;
                container.appendChild(friend);
            });
        }

        // 页面加载完成后添加动物朋友
        window.addEventListener('load', addAnimalFriends);
    </script>
</body>
</html>
